<template>
  <div class="comman_and">
    <el-dialog
      @close="handleClose"
      :lock-scroll="false"
      close-on-press-escape
      v-dialogDrag
      title="配方详情"
      :close-on-click-modal="false"
      :visible="formulaShow"
      width="750px"
    >
      <div style="position: relative; margin-bottom: 20px">
        <MyTitle title="详情"></MyTitle>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="commandToken">Token ：{{ form.token }}</div></el-col
          >
          <el-col :span="12">
            <div class="commandToken">
              模板名称 ：{{
                form.technologyTemplate && form.technologyTemplate.name
              }}
            </div></el-col
          >
          <el-col :span="12"
            ><div class="commandToken">
              零件号 ：{{ form.partNumber }}
            </div></el-col
          >
          <el-col :span="12">
            <div class="explain1">
              零件名称 ：{{ form.processName }}
            </div></el-col
          >
          <el-col :span="12">
            <div class="explain1">
              工序号 ：{{ form.processNumber }}
            </div></el-col
          >
          <el-col :span="12">
            <div class="explain1">
              工序名称 ：{{ form.processName }}
            </div></el-col
          >
        </el-row>
      </div>

      <div style="position: relative; margin-bottom: 20px">
        <MyTitle title="参数"></MyTitle>
        <div class="mail_table_box">
          <el-table
            v-if="formulaParameter.length"
            max-height="500px"
            min-height="100%"
            border
            size="mini"
            :data="formulaParameter[0].keys"
            style="width: 74%"
          >
            <el-table-column label="内容\名称" align="center">
              <template slot-scope="scope">
                {{ scope.row }}
              </template>
            </el-table-column>
            <el-table-column
              v-for="(item, index) in formulaParameter"
              :key="index"
              :label="'阶段' + (index + 1)"
              align="center"
            >
              <template slot-scope="scope1">
                {{ item.texts[scope1.$index] }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MyTitle from "@/components/MyTitle";
import { postFormulaInv } from "@/api/deviceType";
export default {
  components: {
    MyTitle
  },
  props: {
    deviceToken: {
      type: String,
      default: ""
    },
    tableData: {
      type: Array,
      default: () => []
    },
    formulaParameter: {
      type: Array,
      default: () => []
    },
    formulaShow: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    username() {
      return this.$store.state.user.user.username;
    }
  },
  mounted() {},
  methods: {
    submit() {
      if (this.form.state == "true") {
        const from = {
          formulaToken: this.form.token,
          initiator: "REST",
          initiatorId: this.username,
          target: "Assignment",
          targetId: ""
        };
        postFormulaInv(from, this.deviceToken).then(res => {
          this.$msg({
            message: "调用成功",
            type: "success"
          });
          this.$emit("handleClose", true);
        });
      } else {
        this.$msg("当前状态不可调用");
      }
    },
    // 弹窗关闭改变参数
    handleClose() {
      this.$emit("handleClose");
    },
    // 弹窗取消键
    cancel() {
      this.$emit("handleClose");
    }
  }
};
</script>

<style scoped lang="scss">
.mail_table_box {
  overflow: hidden;
  overflow-x: auto;
}
.comman_and /deep/ .title_box {
  padding-left: 0;
}
.textFlex {
  margin-left: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dividing-line {
  display: inline-block;
  height: 24px;
  width: 4px;
  margin: 0 10px;
  vertical-align: middle;
  background-color: #2680d2;
}
.text {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  position: absolute;
  top: 2px;
  left: 20px;
}
.commandToken {
  margin-top: 15px;
  color: #666666;
}
.commandName {
  margin-top: 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nominate {
  margin-top: 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explain1 {
  margin-top: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
